<template>
  <!--顶部 搜索栏-->
  <div class="box-item search-box box-item-row">
    <div class="">
      <el-input v-model="searchData.title" style="width: 240px;margin-right: 10px;" placeholder="输入商品名称..." />
      <el-input v-model="searchData.sn" style="width: 240px;margin-right: 10px;" placeholder="输入商品编号..." />
      <el-select
      v-model="searchData.state"
      placeholder="选择状态"
      clearable
      size="large"
      style="width: 240px;margin-right: 10px;"
    >
    <el-option
        v-for="item in options"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      />
    </el-select>
    </div>
    <div>
      <el-button type="primary" @click="searchlist(1)">搜索</el-button>
      <el-button type="primary" @click="searchlist(2)">重置</el-button>
    </div>
  </div>
  <!--头部 工具栏 添加 批量删除等-->
  <!-- <div class="box-item tool-box box-item-row">
    <div style="margin-right: 10px;">
      <el-button type="primary" @click="showAddModal" data-text="goods_goods_add">添加</el-button>
    </div>
    <div style="margin-right: 10px;">
      <el-button type="primary" @click="testDebounce">点击</el-button>
    </div>
  </div> -->
  <!--中部 内容栏 表格等-->
  <div class="box-item table-box">
    <el-table :data="tableData.data" border>
      <el-table-column prop="id" label="ID"> </el-table-column>
      <el-table-column label="分组" >
        <template #default="scope">
        <el-tag type="primary">{{ scope.row.ArticleCate.name }}</el-tag>
      </template>
      </el-table-column>
      
      <el-table-column prop="title" label="标题" > </el-table-column>
      <!-- <el-table-column prop="description" label="简介"></el-table-column> -->
      <el-table-column label="封面">
        <template #default="scope">
        <img :src="scope.row.thumb" style="width:80px;height:80px"/>
      </template>
      </el-table-column>
      <el-table-column prop="sort" label="排序"></el-table-column>
      <el-table-column label="状态">
      <template #default="scope">
        <el-tag :type="scope.row.state == 1?'success':'danger'">{{ scope.row.state == 1?'正常':'禁用' }}</el-tag>
      </template>
    </el-table-column>
      <el-table-column fixed="right" label="操作" width="120">
        <template #default="scope">
          <el-button
            link
            type="primary"
            size="small"
            @click="editAddModal(scope.$index)"
            >编辑</el-button
          >
          <!-- <el-button
            link
            type="primary"
            size="small"
            @click="handleClick(scope.$index, scope.row.id)"
            >详情</el-button
          > -->
        </template>
      </el-table-column>
    </el-table>
  </div>

  <!--底部 分页操作栏-->
  <div class="box-item page-box">
    <el-pagination
      v-model:current-page="tableData.current_page"
      v-model:page-size="tableData.per_page"
      :page-sizes="[10, 20, 30, 50, 100, 200, 300, 400]"
      :small="true"
      :disabled="false"
      :background="false"
      layout="total, sizes, prev, pager, next, jumper"
      :total="tableData.total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>

  <!--模态框 添加 编辑-->
    <!-- <addModal
        ref="addDia"
        :list="chooseData"
        :cateArr="cateArr"
        @useClose="addUseClose"
        @useConfirm="addUseConfirm"
      ></addModal> -->

</template>
<script setup>
import { onMounted, onUnmounted, getCurrentInstance, reactive, ref, nextTick } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
// import addModal from "./add.vue";
import { debounce,throttle } from "@/utils/common.js"
const currentInstance = getCurrentInstance(); //获取main.js中挂载的实例
const { $api } = currentInstance.appContext.config.globalProperties;

//防抖和节流测试
const testClick = () =>{
  console.log("防抖");
};

const testDebounce = debounce(testClick,1000);

//表格数据元素
const tableData = reactive({
    total: 0, //总数
    per_page: 10, //每页显示
    current_page: 1, //当前页
    last_page: 1, //最后一页的页码
    data: [], //数据列表
});
//角色数组
const cateArr = ref([]);

//搜索元素组
const searchData = reactive({
  title:'',//名称
  state:'',//状态
});
//编辑或删除或详情选中的数据
const chooseData = ref({
  id:0,
  cate_id:1,
  text:''
});
const chooseIndex = ref(0); //选中的表格数据下标

const addDia = ref(null);
const options = [
  {
    value: 0,
    label: '禁用',
  },
  {
    value: 1,
    label: ' 启用',
  }
]

onMounted(() => {
  getList(1); //列表
  
  setTimeout(()=>{
    getUserCateArr();
  },2000);
});

//获取列表信息
const getList = (type) => {
  const params ={ page:tableData.current_page,title:searchData.title,state:searchData.state,limit:tableData.per_page}; 
  $api.get("v1/login/article/article/list",params).then((res) => {
    if (res.code == 200) {
      // tableData = reactive(res.data);
      Object.assign(tableData,res.data);
      // tableData.data = res.data;
      // console.log(res.data);
    }
  });
};
//获取用户分组数组
const getUserCateArr = () => {
  $api.get("v1/login/article/article_cate/cate_arr",{}).then((res) => {
    if (res.code == 200) {
      cateArr.value = res.data;
    }
  });
};

//改变每页显示的数量
const handleSizeChange = (val) => {
   tableData.per_page = val;
   getList(2);
};
//改变当前页码
const handleCurrentChange = (val) => {
  tableData.current_page = val;
  getList(3);
};
//搜索
const searchlist = (type) =>{
  // console.log(66);
  //重置搜索条件
  if(type == 2){
    searchData.title="";
    searchData.state ="";
  }
  getList(4);
  
};
//编辑数据
const editAddModal =  (index) =>{
  const item = tableData.data[index];
  if(item.state == 1){
    item.state = true;
  }else{
    item.state = false;
  }
  chooseData.value = item;
  chooseIndex.value = index;
  // console.log('编辑',chooseData.value,item.id,index);
  nextTick(()=>{
     showAddModal();
  });
  
};
//显示添加模态框
const showAddModal = () => {
  // console.log('点击',addDia.value)
  // chooseData.value = {id:0}
  nextTick(()=>{
    addDia.value.dialogVisble = true; //更改值
  })
  
};
//关闭弹出框
const addUseClose = (e) => {
  // console.log(tableData,"55");
  chooseData.value = {
  id:0,
  cate_id:1,
  text:''
}//重置
  // console.log(e,chooseData, "关闭");
  // 二次确认删除
  //   ElMessageBox.confirm("确定要新增吗？", "提示", {
  //     type: "warning",
  //   })
  //     .then(() => {
  //       ElMessage.success("新增成功");
  //     })
  //     .catch(() => {});
};
//弹出框提交按钮
const addUseConfirm = (obj) => {
  chooseData.value = {
  id:0,
  cate_id:1,
  text:''
};//重置;
  // console.log(obj,"455");
  $api.post('v1/login/article/article/add',obj).then((res)=>{
        if(res.code == 200){
          // console.log( obj, obj.id)
          if(obj.id > 0){ //编辑
            // const item = tableData.data[chooseIndex.value];
            // Object.assign(item,res.data);
            tableData.data.splice(chooseIndex.value,1,res.data);
          }else{ //添加
            tableData.data.unshift(res.data); //向数组第一个位置添加
            tableData.total ++ //数量加1
          }
        }
        ElMessage.success(res.msg);
      })
};

//表格操作 - 指定数据/行间操作（编辑,删除等）
const handleClick = (index, id) => {
  // console.log("click", index, id);
};

</script>
<style></style>
